<template>
  <a-drawer
    v-bind="$attrs"
    :body-style="{ paddingBottom: '80px' }"
    :mask-closable="false"
    :destroy-on-close="true"
    @after-visible-change="onAfterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="props.loading">
      <a-form :model="form.data" :rules="form.rules" layout="vertical">
        <a-form-item label="名称" name="name" v-bind="editFormValidateInfos.name">
          <a-input v-model:value="form.data.name" placeholder="请输入客户端名称" />
        </a-form-item>
        <a-form-item label="作用域" name="scope" v-bind="editFormValidateInfos.scope">
          <a-select
            v-model:value="form.data.scope"
            mode="tags"
            style="width: 100%"
            placeholder="请选择客户端作用域"
          ></a-select>
        </a-form-item>
        <a-form-item label="认证类型" name="authorizedGrantTypes" v-bind="editFormValidateInfos.authorizedGrantTypes">
          <a-select
            v-model:value="form.data.authorizedGrantTypes"
            mode="multiple"
            style="width: 100%"
            placeholder="请选择客户端认证类型"
          >
            <a-select-option value="refresh_token">刷新模式</a-select-option>
            <a-select-option value="password">密码模式</a-select-option>
            <a-select-option value="ldap">LDAP</a-select-option>
            <a-select-option value="sms_code">手机验证码</a-select-option>
            <a-select-option value="qy_wechat_sso">企微单点登录</a-select-option>
            <a-select-option value="ding_sso">钉钉单点登录</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="回调地址"
          name="registeredRedirectUris"
          v-bind="editFormValidateInfos.registeredRedirectUris"
        >
          <a-select
            v-model:value="form.data.registeredRedirectUris"
            mode="tags"
            style="width: 100%"
            placeholder="请选择客户端回调地址"
          ></a-select>
        </a-form-item>
        <a-form-item label="权限集合" name="authorities" v-bind="editFormValidateInfos.authorities">
          <a-select
            v-model:value="form.data.authorities"
            mode="tags"
            style="width: 100%"
            placeholder="请选择客户端权限集合"
          ></a-select>
        </a-form-item>
        <a-form-item
          label="token时间(秒)"
          name="accessTokenValiditySeconds"
          v-bind="editFormValidateInfos.accessTokenValiditySeconds"
        >
          <a-input v-model:value="form.data.accessTokenValiditySeconds" placeholder="请输入客户端token时间(秒)" />
        </a-form-item>
        <a-form-item
          label="最新token时间(秒)"
          name="refreshTokenValiditySeconds"
          v-bind="editFormValidateInfos.refreshTokenValiditySeconds"
        >
          <a-input v-model:value="form.data.refreshTokenValiditySeconds" placeholder="请输入客户端最新token时间(秒)" />
        </a-form-item>

        <a-form-item label="状态" name="enable" v-bind="editFormValidateInfos.enable">
          <a-switch v-model:checked="form.data.enable" />
        </a-form-item>
        <a-form-item label="描述" name="description" v-bind="editFormValidateInfos.description">
          <a-textarea v-model:value="form.data.description" :rows="4" placeholder="请输入客户端描述" />
        </a-form-item>
      </a-form>
    </a-spin>
    <template #footer>
      <a-space>
        <a-button type="primary" @click.prevent="onSubmit">确定</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive, ref } from 'vue'
import { message, Form } from 'ant-design-vue'

import { clientModel } from '../model'
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  current: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const onAfterVisibleChange = (visible) => {
  if (visible && props.current.id) {
    form.data = JSON.parse(JSON.stringify(props.current))
  } else {
    form.data = JSON.parse(JSON.stringify(clientModel))
  }
  if (props.loading) {
    emits('update:loading', false)
  }
}

const emits = defineEmits(['submit', 'update:visible', 'update:loading'])

const form = reactive({
  data: {
    name: '',
    scope: [],
    authorizedGrantTypes: ['ldap'],
    registeredRedirectUris: [],
    authorities: [],
    accessTokenValiditySeconds: 0,
    refreshTokenValiditySeconds: 0,
    enable: false,
    description: '',
  },
  rules: {},
})

const {
  resetFields: editFormResetFields,
  validate: editFormValidate,
  validateInfos: editFormValidateInfos,
} = Form.useForm(form.data, form.rules, {
  onValidate: (...args) => console.log(...args),
})

const onClose = () => {
  editFormResetFields()
  emits('update:visible', false)
}

const onSubmit = () => {
  editFormValidate()
    .then(() => emits('submit', form.data))
    .catch((err) => {
      console.log('error', err)
    })
}
</script>
